<template>
  <div class="FileUpload">
    <el-upload
    list-type="picture-card" 
    :auto-upload="false"
    :show-file-list="false"
    :on-change="onUploadFile"
    >
      <img v-if="imgUrl" :src="imgUrl" class="cover" />
      <el-icon v-else><Plus /></el-icon>
    </el-upload>


  </div>
</template>
<script setup>
import { fileUploadService } from '@/api/file.js';
import { Plus } from '@element-plus/icons-vue';
import { ref } from 'vue';

const props = defineProps(['imgUrl']);
const emits = defineEmits(['FileUpload']);

const localImgUrl = ref(props.imgUrl)

const onUploadFile = async (uploadFile) => {
  const res = await fileUploadService(uploadFile.raw)
  localImgUrl.value = res.data.data
  emits('FileUpload', localImgUrl.value);
}
</script>

<style scoped>
.cover {
  object-fit: cover;
  width: 148px;
  height: 148px;
}
</style>
